<template>
  <div>
    <!-- 头部 -->
    <template>
      <header-option>
        <template v-slot:btn>
          <div>
            <!-- <cs-btn type="primary" btnText="添加网关" @click.native="alterGatewayInfodialogVisible(0,'')" /> -->
            <cs-btn
              v-if="innerMenu.add.flag"
              type="primary"
              btnText="添加设备"
              @click.native="alterInfodialogVisible(0, '')"
            />
            <cs-btn v-if="innerMenu.del.flag" btnText="删除" @click.native="dellistfn" />
            <cs-btn v-if="innerMenu.exp.flag" btnText="导出" @click.native="exportfn" />
          </div>
        </template>
        <template v-slot:input>
          <cs-label labelText="设备状态">
            <el-select
              placeholder="全部"
              class="cs_select"
              v-model="listModel.deviceStatus"
              clearable
            >
              <el-option value="1" label="在线"></el-option>
              <el-option value="0" label="离线"></el-option>
            </el-select>
          </cs-label>
          <cs-label labelText="设备名称">
            <el-input class="cs-input" v-model.trim="listModel.keyword" clearable></el-input>
          </cs-label>
          <cs-btn type="search" btnText="查询" @click.native="searchBtnClick" class="searcg_btn" />
        </template>
      </header-option>
    </template>
    <!-- 表格 -->
    <template>
      <cs-card>
        <el-table
          v-loading="isLoading"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="siteName" label="站点名称"></el-table-column>
          <el-table-column label="站点联系人" width="200">
            <template slot-scope="scope">
              <cs-text type=""
                >{{ scope.row.siteAgent }} <br />
                {{ scope.row.phone }}
              </cs-text>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="设备名称"></el-table-column>
          <el-table-column label="设备槽位" width="180">
            <template slot-scope="scope">
              <cs-text v-if="scope.row.type !== 1" type="">槽位{{ scope.row.slot }}</cs-text>
              <span v-else>—</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="username" label="创建人" width="100"> </el-table-column> -->
          <el-table-column label="设备类型" width="100">
            <template slot-scope="scope">
              <cs-text type="primary" v-if="scope.row.type == 1"
                >网关<i class="el-icon-cpu ml5"></i
              ></cs-text>
              <cs-text type="warning" v-else-if="scope.row.type == 2"
                >地磅<i class="el-icon-odometer ml5"></i
              ></cs-text>
              <cs-text type="mildWarning" v-else
                >摄像头<i class="el-icon-video-camera ml5"></i
              ></cs-text>
            </template>
          </el-table-column>
          <el-table-column label="是否可用" width="100">
            <template slot-scope="scope">
              <cs-text type="success" v-if="scope.row.isAvailable == 1">可用</cs-text>
              <cs-text type="danger" v-else>不可用</cs-text>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="设备状态" width="100">
            <template slot-scope="scope">
              <cs-text type="success" v-if="scope.row.deviceStatus == 1">在线</cs-text>
              <cs-text type="danger" v-else>离线</cs-text>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope" v-if="innerMenu.upd.flag">
              <el-link
                type="primary"
                v-if="scope.row.type == 3"
                @click="alterInfodialogVisible(scope.row.id, scope.row)"
                >编辑
              </el-link>
              <el-link
                type="primary"
                v-else-if="scope.row.type == 1"
                @click="alterGatewayInfodialogVisible(scope.row.id, scope.row)"
                >编辑
              </el-link>
              <el-link v-if="scope.row.type == 3" type="primary" @click="altervideofn(scope.row)"
                >通道配置
              </el-link>
              <el-link
                v-if="scope.row.type == 1"
                type="primary"
                @click="synchronizationfn(scope.row)"
                >同步
              </el-link>
              <el-link v-if="scope.row.type == 1" type="primary" @click="altergorgefn(scope.row)"
                >串口配置
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <div id="pagination_section">
          <span class="currentSelect">{{ `已选${currentSelect}项，共${totalCount}项` }}</span>
          <div class="pagination_right">
            <span>{{ `${listModel.pageSize}条/页` }}</span>
            <cs-pagination
              :currentPage="currentPage"
              :totalPage="totalPage"
              @firstPageClick="firstPageClick"
              @previousPageClick="previousPageClick"
              @nextPageClick="nextPageClick"
              @lastPageClick="lastPageClick"
              @junkToOtherPage="junkToOtherPage"
            />
          </div>
        </div>
      </cs-card>
    </template>
    <!-- 修改框 -->
    <template>
      <el-dialog
        :title="title + '设备信息'"
        :visible.sync="dialogVisible"
        width="808px"
        class="dialogTitle"
        @closed="cancelBtnClick('alterForm')"
      >
        <el-form label-width="160px" ref="alterForm" :model="dialogData" :rules="rules">
          <el-form-item label="网关" prop="productKey">
            <el-select
              v-model="dialogData.productKey"
              class="form-select"
              :disabled="!!dialogData.id"
              clearable
            >
              <el-option
                v-for="(item, index) in gatewaylist"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" class="el-form-item-text" prop="name">
            <el-input v-model.trim="dialogData.name"></el-input>
          </el-form-item>
          <el-form-item label="用户名称" class="el-form-item-text" prop="username">
            <el-input v-model.trim="dialogData.username"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" class="el-form-item-text" prop="password">
            <el-input v-model.trim="dialogData.password"></el-input>
          </el-form-item>
          <el-form-item label="设备槽位" class="el-form-item-text" prop="slot">
            <el-select v-model="dialogData.slot" class="form-select" clearable>
              <el-option
                v-for="(item, index) in 16"
                :key="index"
                :label="'槽位' + item"
                :value="index + 1"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备IP" class="el-form-item-text" prop="ip">
            <el-input v-model.trim="dialogData.ip"></el-input>
          </el-form-item>
          <el-form-item label="设备端口" class="el-form-item-text" prop="port">
            <el-input type="number" v-model.trim="dialogData.port"></el-input>
          </el-form-item>
          <el-form-item label="设备标识别名" class="el-form-item-text" prop="typeAlias">
            <el-select v-model="dialogData.typeAlias" class="form-select" clearable>
              <el-option label="无标识" :value="0"></el-option>
              <el-option label="车牌识别摄像机" :value="1"></el-option>
              <el-option label="轮轴识别摄像机" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="设备协议" class="el-form-item-text" prop="protocol">
            <el-select v-model="dialogData.protocol" class="form-select" clearable>
              <el-option v-for="(item,index) in deviceprotocol" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
        <div class="dialog-footer">
          <!-- <el-button
            class="confirm_btn dialog_btn"
            :disabled="lockbtn"
            @click.native="confirmBtnClick('alterForm')"
            type="primary"
            >确定</el-button
          > -->
          <cs-btn
            type="primary"
            @click.native="confirmBtnClick('alterForm')"
            btnText="确定"
            class="confirm_btn dialog_btn"
            :buttonStatus="buttonStatus"
          />

          <cs-btn @click.native="cancelBtnClick('alterForm')" btnText="取消" class="dialog_btn" />
        </div>
      </el-dialog>
    </template>
    <!-- 设备通道修改 -->
    <template>
      <el-dialog
        title="修改通道编码"
        :visible.sync="dialogVisiblevideo"
        width="808px"
        class="dialogTitle"
        @closed="cancelvideoBtnClick()"
      >
        <el-form label-width="120px" ref="videoForm" :model="dialogvideoData">
          <el-form-item label="通道编码" class="el-form-item-text">
            <el-input v-model.trim="dialogvideoData.gbId" clearable></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <cs-btn
            type="primary"
            @click.native="confirmvideoBtnClick('videoForm')"
            btnText="确定"
            class="confirm_btn dialog_btn"
            :buttonStatus="alterPassagewayStatus"
          />
          <cs-btn @click.native="cancelvideoBtnClick()" btnText="取消" class="dialog_btn" />
        </div>
      </el-dialog>
    </template>
    <!-- 修改 -->
    <template>
      <el-dialog
        :title="title + '网关'"
        :visible.sync="GatewaydialogVisible"
        width="808px"
        class="dialogTitle"
        @closed="cancelgatewayBtnClick('gatewayForm')"
      >
        <el-form label-width="120px" ref="gatewayForm" :model="dialoggatewayData">
          <el-form-item label="网关ID" class="el-form-item-text">
            <el-input
              :disabled="!!dialoggatewayData.id"
              onkeyup="this.value = this.value.replace(/[\W]/g,'');"
              v-model.trim="dialoggatewayData.productKey"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="网关名称" class="el-form-item-text">
            <el-input v-model.trim="dialoggatewayData.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="站点" class="el-form-item-text">
            <el-select v-model="dialoggatewayData.siteId" clearable class="form-select">
              <el-option
                v-for="(item, index) in sitelist"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="SIP用户名" class="el-form-item-text">
            <el-input
              onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
              v-model.trim="dialoggatewayData.gbId"
              clearable
            ></el-input>
          </el-form-item> -->
        </el-form>
        <div class="dialog-footer">
          <cs-btn
            type="primary"
            @click.native="confirmgatewayBtnClick('gatewayForm')"
            btnText="确定"
            class="confirm_btn dialog_btn"
          />
          <cs-btn
            @click.native="cancelgatewayBtnClick('gatewayForm')"
            btnText="取消"
            class="dialog_btn"
          />
        </div>
      </el-dialog>
    </template>
    <!-- 串口配置 -->
    <el-drawer title="串口配置" size="80%" :visible.sync="drawer" :with-header="false">
      <div class="p20">
        <el-page-header @back="drawer = false" content="串口配置"></el-page-header>
        <template class="mt20">
          <el-table :data="gorgelist" stripe style="width: 100%">
            <el-table-column prop="name" label="串口名称"></el-table-column>
            <el-table-column prop="index" label="串口索引"></el-table-column>
            <el-table-column prop="setting.baudrate" label="波特率"></el-table-column>
            <el-table-column prop="setting.databit" label="数据位"></el-table-column>
            <el-table-column prop="setting.stopbit" label="停止位"></el-table-column>
            <el-table-column prop="setting.parity" label="奇偶校验"></el-table-column>
            <el-table-column prop="setting.flow_control" label="流控"></el-table-column>
            <el-table-column prop="connect" label="相连设备"></el-table-column>
            <el-table-column prop="protocol" label="地磅协议类型"></el-table-column>
            <el-table-column prop="overlay.slot" label="视频通道"></el-table-column>
            <el-table-column label="坐标x,y">
              <template slot-scope="scope">
                <span>{{ scope.row.overlay.pos.x }} , {{ scope.row.overlay.pos.y }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="text" @click="setgorgeinfo(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </el-drawer>
    <template>
      <el-dialog
        title="编辑串口配置"
        :visible.sync="gorgedialogVisible"
        width="808px"
        class="dialogTitle"
        @closed="cancelgorgeBtnClick('gorgeForm')"
      >
        <el-form label-width="120px" ref="gorgeForm" :model="gorgeinfo">
          <el-form-item label="波特率">
            <el-select style="width: 100%" v-model="gorgeinfo.baudrate" placeholder="请选择波特率">
              <el-option label="115200" value="115200"></el-option>
              <el-option label="38400" value="38400"></el-option>
              <el-option label="19200" value="19200"></el-option>
              <el-option label="9600" value="9600"></el-option>
              <el-option label="4800" value="4800"></el-option>
              <el-option label="2400" value="2400"></el-option>
              <el-option label="1200" value="1200"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据位">
            <el-select style="width: 100%" v-model="gorgeinfo.databit" placeholder="请选择数据位">
              <el-option label="5" value="5"></el-option>
              <el-option label="6" value="6"></el-option>
              <el-option label="7" value="7"></el-option>
              <el-option label="8" value="8"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="停止位">
            <el-select style="width: 100%" v-model="gorgeinfo.stopbit" placeholder="请选择停止位">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="奇偶校验">
            <el-select style="width: 100%" v-model="gorgeinfo.parity" placeholder="请选择奇偶校验">
              <el-option label="N" value="N"></el-option>
              <el-option label="O" value="O"></el-option>
              <el-option label="E" value="E"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流控">
            <el-select style="width: 100%" v-model="gorgeinfo.flowControl" placeholder="请选择流控">
              <el-option label="0" value="0"></el-option>
              <el-option label="1" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="相连设备" class="el-form-item-text">
            <el-input v-model.trim="gorgeinfo.connect" clearable></el-input>
          </el-form-item>
          <el-form-item label="地磅协议" class="el-form-item-text">
            <el-input v-model.trim="gorgeinfo.protocol" clearable></el-input>
          </el-form-item>
          <el-form-item label="视频通道" class="el-form-item-text">
            <el-input v-model.trim="gorgeinfo.slot" clearable></el-input>
          </el-form-item>
          <el-form-item label="x" class="el-form-item-text">
            <el-input v-model.trim="gorgeinfo.x" clearable></el-input>
          </el-form-item>
          <el-form-item label="y" class="el-form-item-text">
            <el-input v-model.trim="gorgeinfo.y" clearable></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <cs-btn
            type="primary"
            @click.native="confirmgorgeBtnClick('gorgeForm')"
            btnText="确定"
            class="confirm_btn dialog_btn"
          />
          <cs-btn
            @click.native="cancelgorgeBtnClick('gorgeForm')"
            btnText="取消"
            class="dialog_btn"
          />
        </div>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import _ from 'lodash'

import headerOption from '@/components/headerOption/headerOption.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csLabel from '@/components/cs-label/cs-label.vue'
import csCard from '@/components/cs-card/cs-card.vue'
import csPagination from '@/components/cs-pagination/cs-pagination.vue'
import csText from '@/components/cs-text/cs-text.vue'
import {
  getLivingGateway,
  setSerial,
  deviceSync,
  addDevice,
  getDeviceList,
  changeDevice,
  deleteDevice,
  modifyVideoId,
  modifyGateway,
  getSerials,
  deviceexport,
  getSiteNameAndId
} from '@/service/monitor/equipment_management/equipment_management'
import { getCacheInnerMenu } from '@/utils/menu'

export default {
  components: {
    headerOption,
    csBtn,
    csLabel,
    csCard,
    csPagination,
    csText
  },
  data() {
    return {
      buttonStatus: false,
      alterPassagewayStatus: false,
      drawer: false,
      lockbtn: false,
      gorgedialogVisible: false,
      gorgeinfo: {
        productKey: '',
        index: '',
        baudrate: '',
        databit: '',
        stopbit: '',
        parity: '',
        flowControl: '',
        connect: '',
        protocol: '',
        slot: '',
        x: '',
        y: ''
      },
      gorgelist: [],
      title: '',
      siteName: '',
      // 当前页码
      currentPage: 1,
      // 一页的条数
      // pageSize: 10,
      // 总共多少条数据
      totalCount: 0,
      // 总共多少页
      totalPage: 0,
      currentSelect: 0,
      selectId: [],
      tableData: [],
      switchStatus: true,
      gatewaylist: [],
      devicetype: [
        { name: 'IPC', id: '1' },
        { name: 'IP Dome', id: '2' },
        { name: 'NVR', id: '3' },
        { name: 'DVR', id: '4' }
      ],
      deviceprotocol: [
        { name: 'ONVIF', id: '1' },
        { name: '海康威视', id: '2' },
        { name: '大华', id: '3' },
        { name: '宇视', id: '4' },
        { name: 'RTSP', id: '5' }
      ],
      dialogVisible: false,
      dialogData: {
        id: '',
        productKey: '',
        slot: '',
        name: '',
        ip: '',
        port: '',
        username: '',
        password: '',
        typeAlias: 0,
        type: '1',
        protocol: '2',
        channelUsed: [1],
        channelMax: 1,
        channelSupport: [0]
      },
      listModel: {
        pageNum: 1,
        pageSize: 10,
        deviceStatus: '',
        keyword: ''
      },
      GatewaydialogVisible: false,
      sitelist: [],
      dialoggatewayData: {
        id: '',
        siteId: '',
        // gbId: '',
        productKey: '',
        type: 1,
        name: ''
      },
      dialogVisiblevideo: false,
      dialogvideoData: {
        id: '',
        gbId: ''
      },
      rules: {
        productKey: [{ required: true, message: '请选择网关', trigger: 'blur' }],
        slot: [{ required: true, message: '请输入设备槽位', trigger: 'blur' }],
        name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        ip: [{ required: true, message: '请输入设备IP', trigger: 'blur' }],
        port: [{ required: true, message: '请输入设备端口', trigger: 'blur' }],
        protocol: [{ required: true, message: '请输入设备协议', trigger: 'blur' }],
        gbId: [{ required: true, message: '请输入视频编码通道', trigger: 'blur' }],
        typeAlias: [{ required: true, message: '请输入设备标识别名', trigger: 'blur' }],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        type: [{ required: true, message: '请输入设备类型', trigger: 'blur' }]
      },
      isLoading: false,
      innerMenu: {}
    }
  },
  watch: {
    'listModel.deviceStatus'(newValue) {
      if (newValue === '') {
        this.getDevice()
      }
    },
    'listModel.keyword'(newValue) {
      if (newValue === '') {
        this.getDevice()
      }
    }
  },
  created() {
    this.getGateway()
    this.getsitelist()
    this.getDevice()
    this.innerMenu = getCacheInnerMenu(this.$route.meta.id)
    // console.log('站点管理权限', this.innerMenu)
  },
  beforeDestroy() {
    this.$bus.$off('siteSelectNum')
  },
  methods: {
    // 搜索按钮点击事件
    searchBtnClick() {
      // 如果表格正在加载，则不允许发送请求
      if (this.isLoading) return
      this.getDevice()
    },
    async exportfn() {
      const texts = '共' + this.totalCount + '条数据下载中'
      const loading = this.$loading({
        lock: true,
        text: texts,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const data = await deviceexport(this.listModel)
      if (!!data) {
        const filename = '设备管理表.xlsx'
        const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
          window.navigator.msSaveBlob(blob, decodeURI(filename))
        } else {
          // 创建新的URL并指向File对象或者Blob对象的地址
          const blobURL = window.URL.createObjectURL(blob)
          // 创建a标签，用于跳转至下载链接
          const tempLink = document.createElement('a')
          tempLink.style.display = 'none'
          tempLink.href = blobURL
          tempLink.setAttribute('download', decodeURI(filename))
          // 兼容：某些浏览器不支持HTML5的download属性
          if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank')
          }
          // 挂载a标签
          document.body.appendChild(tempLink)
          tempLink.click()
          document.body.removeChild(tempLink)
          // 释放blob URL地址
          window.URL.revokeObjectURL(blobURL)
        }
        setTimeout(() => {
          loading.close()
        }, 2000)
      } else {
        setTimeout(() => {
          loading.close()
        }, 2000)
      }
    },
    async getGateway() {
      this.isLoading = true
      const data = await getLivingGateway()
      this.isLoading = false
      if (data.code === 0) {
        this.gatewaylist = data.data
      }
    },
    async getsitelist() {
      this.isLoading = true
      const data = await getSiteNameAndId()
      this.isLoading = false
      if (data.code === 0) {
        this.sitelist = data.data
      }
    },
    async altergorgefn(info) {
      this.gorgeinfo.productKey = info.productKey
      this.getSerialslist()
    },
    async getSerialslist() {
      const data = await getSerials({ productKey: this.gorgeinfo.productKey })
      if (data.code === 0) {
        this.gorgelist = data.data.serial_list
        this.drawer = true
      } else {
        this.$message.error(data.msg)
        return false
      }
    },
    async synchronizationfn(info) {
      const data = await deviceSync({ productKey: info.id })
      if (data.code === 0) {
        this.$message({
          message: '同步成功',
          type: 'success'
        })
        this.getSerialslist()
      } else {
        this.$message.error('操作超时')
      }
    },
    setgorgeinfo(info) {
      this.gorgedialogVisible = true
      this.gorgeinfo.index = info.index
      this.gorgeinfo.baudrate = info.setting.baudrate
      this.gorgeinfo.databit = info.setting.databit
      this.gorgeinfo.stopbit = info.setting.stopbit
      this.gorgeinfo.parity = info.setting.parity
      this.gorgeinfo.flowControl = info.setting.flow_control
      this.gorgeinfo.connect = info.connect
      this.gorgeinfo.protocol = info.protocol
      this.gorgeinfo.slot = info.overlay.slot
      this.gorgeinfo.x = info.overlay.pos.x
      this.gorgeinfo.y = info.overlay.pos.y
    },
    async confirmgorgeBtnClick() {
      const data = await setSerial(this.gorgeinfo)
      if (data.code === 0) {
        this.gorgedialogVisible = false
        this.getSerialslist()
      }
    },
    cancelgorgeBtnClick() {
      this.gorgedialogVisible = false
      this.gorgeinfo = {
        productKey: '',
        index: '',
        baudrate: '',
        databit: '',
        stopbit: '',
        parity: '',
        flowControl: '',
        connect: '',
        protocol: '',
        slot: '',
        x: '',
        y: ''
      }
    },
    altervideofn(info) {
      this.dialogVisiblevideo = true
      this.dialogvideoData.id = info.id
      this.dialogvideoData.gbId = info.gbId
    },
    async confirmvideoBtnClick() {
      this.alterPassagewayStatus = true
      if (this.dialogvideoData.gbId === '') {
        this.$message.error('请填写通道编码')
        this.alterPassagewayStatus = false
        return false
      } else {
        const data = await modifyVideoId(this.dialogvideoData)
        if (data.code === 0) {
          this.dialogVisiblevideo = false
          await this.getDevice()
          this.$message({
            message: '修改通道编码成功',
            type: 'success'
          })

          this.alterPassagewayStatus = false
        }
      }
    },
    cancelvideoBtnClick() {
      this.dialogVisiblevideo = false
      this.dialogvideoData.id = ''
      this.dialogvideoData.gbId = ''
    },
    alterGatewayInfodialogVisible(id, obj) {
      this.GatewaydialogVisible = true
      if (id === 0) {
        this.title = '添加'
      } else {
        this.title = '编辑'
        this.dialoggatewayData.productKey = obj.productKey
        this.dialoggatewayData.name = obj.name
        this.dialoggatewayData.id = obj.id
        this.dialoggatewayData.siteId = obj.siteId
        // this.dialoggatewayData.gbId = obj.gbId
      }
    },
    cancelgatewayBtnClick() {
      this.GatewaydialogVisible = false
      this.dialoggatewayData.productKey = ''
      this.dialoggatewayData.name = ''
      this.dialoggatewayData.id = ''
      this.dialoggatewayData.siteId = ''
      // this.dialoggatewayData.gbId = ''
    },
    async confirmgatewayBtnClick() {
      if (this.dialoggatewayData.productKey === '') {
        this.$message.error('请填写网关id')
        return false
      } else if (this.dialoggatewayData.name === '') {
        this.$message.error('请填写网关名称')
        return false
      } else if (this.dialoggatewayData.siteId === '') {
        this.$message.error('请选择站点')
        return false
      } else {
        const data = await modifyGateway(this.dialoggatewayData)
        if (data.code === 0) {
          this.$message({
            message: data.data,
            type: 'success'
          })
          this.GatewaydialogVisible = false
          this.getDevice()
        } else {
          this.$message.error(data.msg)
        }
      }
    },
    alterInfodialogVisible(id, obj) {
      this.dialogVisible = true
      if (id === 0) {
        this.title = '添加'
      } else {
        this.title = '编辑'
        this.dialogData = {
          id: obj.id,
          productKey: obj.productKey,
          slot: obj.slot,
          name: obj.name,
          ip: obj.ip,
          port: obj.port,
          type: '1',
          protocol: '2',
          username: obj.username,
          password: obj.password,
          typeAlias: obj.typeAlias,
          channelUsed: [1],
          channelMax: 1,
          channelSupport: [0]
        }
      }
    },
    cancelBtnClick(alterForm) {
      this.$refs[alterForm].resetFields()
      this.dialogVisible = false
      this.buttonStatus = false
      this.dialogData = {
        id: '',
        productKey: '',
        slot: '',
        name: '',
        ip: '',
        port: '',
        type: '1',
        username: '',
        password: '',
        typeAlias: 0,
        protocol: '2',
        channelUsed: [1],
        channelMax: 1,
        channelSupport: [0]
      }
    },
    getDevice: _.throttle(async function () {
      this.isLoading = true
      const data = await getDeviceList(this.listModel)
      if (data.code === 0) {
        this.tableData = data.data.records
        this.currentPage = data.data.current
        this.totalCount = data.data.total
        this.totalPage = data.data.pages
        this.isLoading = false
      }
    }, 1000),
    confirmBtnClick(alterForm) {
      this.buttonStatus = true
      this.$refs[alterForm].validate(async (valid) => {
        if (valid) {
          // this.lockbtn = true
          if (this.dialogData.id === '') {
            try {
              const data = await addDevice(this.dialogData)
              if (data.code === 0) {
                this.dialogVisible = false
                // this.lockbtn = false
                await this.getDevice()
                this.$message({
                  message: `${this.title}设备信息成功`,
                  type: 'success'
                })
                this.buttonStatus = false
              } else {
                this.$message.error(data.msg)
                // this.lockbtn = false
                this.buttonStatus = false
              }
            } catch (err) {
              console.log(err)
              this.$message.error(data.msg)
              this.buttonStatus = false
            }
          } else {
            try {
              const data = await changeDevice(this.dialogData)
              if (data.code === 0) {
                this.dialogVisible = false

                // this.lockbtn = false
                await this.getDevice()
                this.$message({
                  message: `${this.title}设备信息成功`,
                  type: 'success'
                })
                this.buttonStatus = false
              } else {
                this.$message.error('操作超时')
                // this.lockbtn = false
                this.buttonStatus = false
              }
            } catch (err) {
              console.log(err)
              this.$message.error(data.msg)
              this.buttonStatus = false
            }
          }
        } else {
          this.buttonStatus = false
          return false
        }
      })
    },
    dellistfn() {
      if (this.selectId.length > 0) {
        const text = '您已选择' + this.currentSelect + '项，确认删除？'
        const _this = this
        this.$confirm(text)
          .then(async () => {
            const data = await deleteDevice(this.selectId)
            if (data.code === 0) {
              _this.getDevice()
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            }
          })
          .catch((_) => {})
      } else {
        this.$message.error('请勾选后再操作!')
      }
    },
    // 表格选择项变化时触发事件
    selectionChange(selection) {
      this.selectId = []
      // 获取当前选择多少项
      this.currentSelect = selection.length
      this.$bus.$emit('siteSelectNum', this.currentSelect)
      selection.forEach((item) => {
        this.selectId.push(item.id)
      })
      console.log(this.selectId)
    },
    lastPageClick() {
      if (this.isLoading) return
      this.listModel.pageNum = this.totalPage
      this.getDevice()
    },
    nextPageClick() {
      if (this.isLoading) return
      this.listModel.pageNum = this.currentPage + 1
      this.getDevice()
    },
    previousPageClick() {
      if (this.isLoading) return
      this.listModel.pageNum = this.currentPage - 1
      this.getDevice()
    },
    firstPageClick() {
      if (this.isLoading) return
      this.listModel.pageNum = 1
      this.getDevice()
    },
    // 跳转页
    junkToOtherPage(page) {
      this.listModel.pageNum = page
      this.getDevice(page, this.pageSize)
    }
  }
}
</script>

<style scoped>
/* 头部样式start */
.cs-btn {
  margin-right: 10px;
}

.cs-input >>> .el-input__inner {
  width: 200px !important;
  height: 32px !important;
  border-radius: 0 !important;
}

.el-input >>> .el-input__icon {
  line-height: 32px;
}

.cs_select >>> .el-input__inner {
  width: 100px;
  height: 32px;
  line-height: 32px;
  border-radius: 0;
}

/* 更改el-select下拉框图标的行高 */
.selectTimeInput >>> .el-input__icon {
  line-height: 32px !important;
}

.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.creatTimeLabel {
  width: 455px;
}

.el-date-editor >>> .el-input__inner {
  width: 172px;
  height: 32px;
  line-height: 32px !important;
  border-radius: 0;
  padding-left: 16px;
  padding-right: 0;
  color: #939393;
  background-color: #ebeef2;
}

.el-date-editor >>> .el-input__icon {
  line-height: 32px;
}

.selectTimeIcon_middle {
  font-size: 23px;
  color: #e1e1e1;
  padding: 0 5px;
}

.searcg_btn {
  margin-right: 30px;
}

/* .role_header {
  padding: 30px 10px;
} */

/* 头部样式end */
/* 更改el-select下拉框图标的行高 */
.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.el-form-item >>> .el-form-item__label {
  padding: 0;
  padding-right: 46px;
  color: #888888;
}

.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-textarea >>> .el-textarea__inner {
  border-radius: 0;
}

.form-select {
  width: 100%;
}

.dialogTitle >>> .el-dialog {
  padding: 6px 10px 18px 10px !important;
}

/* checkbox样式 */
.el-checkbox >>> .el-checkbox__inner {
  border-radius: 0;
}

.el-checkbox >>> .el-checkbox__inner::after {
  top: 0;
  left: 3px;
  border: 3px solid #fff;
  border-left: 0;
  border-top: 0;
  width: 4px;
}

.el-checkbox >>> .el-checkbox__label {
  color: #606266;
}

/* 去掉switch外层的div溢出隐藏 */
.el-table >>> .cell {
  overflow: visible;
}

/* 设置switch的宽高边框 */
.el-switch >>> .el-switch__core {
  width: 28px !important;
  height: 14px;
  border: 2px solid #dddddd !important;
}

/* 设置switch圆形按钮的宽高边框位置 */
.el-switch >>> .el-switch__core:after {
  top: -4px;
  width: 14px;
  height: 14px;
  border: 2px solid #dddddd;
}

/* 设置switch圆形按钮的激活位置 */
.el-switch.is-checked >>> .el-switch__core::after {
  left: 106%;
}

/* 设置switch圆形按钮的关闭位置 */
.el-switch >>> .el-switch__core:after {
  left: -2px;
}

/* 对话框样式end */
/* 表格样式start */
.el-form-item >>> .el-form-item__label {
  color: #888888;
}

.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-textarea >>> .el-textarea__inner {
  border-radius: 0;
}

.form-select {
  width: 100%;
}

.el-link {
  display: inline-block;
  margin-right: 16px;
}

/* 表格选择框样式start */
.el-table >>> .el-checkbox__inner {
  width: 20px;
  height: 20px;
}

.el-table >>> .el-checkbox__inner::after {
  top: 3px;
  left: 6px;
}

.el-table >>> .el-checkbox__inner::before {
  top: 8px;
}

/* 表格选择框样式end */

/* 去掉switch外层的div溢出隐藏 */
.el-table >>> .cell {
  overflow: visible;
}

/* 设置switch的宽高边框 */
.el-switch >>> .el-switch__core {
  width: 28px !important;
  height: 14px;
  border: 2px solid #dddddd !important;
}

/* 设置switch圆形按钮的宽高边框位置 */
.el-switch >>> .el-switch__core:after {
  top: -4px;
  width: 14px;
  height: 14px;
  border: 2px solid #dddddd;
}

/* 设置switch圆形按钮的激活位置 */
.el-switch.is-checked >>> .el-switch__core::after {
  left: 106%;
}

/* 设置switch圆形按钮的关闭位置 */
.el-switch >>> .el-switch__core:after {
  left: -2px;
}

/* 表格样式end */
.ml5 {
  margin-left: 5px;
}

.confirm_btn {
  background-color: #006eff;
  border-color: #006eff;
}
</style>
